import React, { useCallback } from 'react';
import { Form, Input, Button, Space, Select } from 'antd';
import styles from './index.less';

const { Option } = Select;

const wrapperCol = { offset: 8, span: 16 };

interface FormBoxProps {
  onSearch: (value: any) => void;
  onReset: () => void;
}

const FormBox: React.FC<FormBoxProps> = ({ onSearch, onReset }) => {
  const [form] = Form.useForm();

  const handleFinish = useCallback(
    (values: any) => {
      onSearch(values);
    },
    [onSearch],
  );

  const handleReset = useCallback(() => {
    form.resetFields();
    onReset();
  }, [form]);

  return (
    <Form form={form} layout="inline" onFinish={handleFinish}>
      <Form.Item label="单号" name="order_no">
        <Input />
      </Form.Item>

      <Form.Item label="支付单号" name="trade_no">
        <Input />
      </Form.Item>

      <Form.Item label="状态" name="status">
        <Select className={styles.selectStyle + ' itemStyle'}>
          <Option value={1}>下单</Option>
          <Option value={2}>支付</Option>
          <Option value={3}>发货</Option>
          <Option value={4}>收货</Option>
          <Option value={5}>过期</Option>
        </Select>
      </Form.Item>

      <Form.Item wrapperCol={wrapperCol} className="btnStyle">
        <Space>
          <Button onClick={handleReset}>重置</Button>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default FormBox;
